<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无限滚动</title>
  <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      #scrollBox {
          margin: 20px;
          height: 400px;
          width: 300px;
          overflow: auto;
          border: 1px solid #999999;
      }

      #bottomSymbol {
          border: 1px solid green;
      }

      ul {
          list-style-type: none;
      }

      ul > li {
          height: 36px;
          line-height: 36px;
          border: 1px solid #b5b5b5;
          margin-bottom: 4px;
          padding-left: 8px;
          background: #fff;
          color: #595959;
      }
  </style>
</head>
<body>
<div id="scrollBox">
  <ul>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
    <li>这是一个列表</li>
  </ul>
  <div id="bottomSymbol"></div>
</div>
<!-- 传统方法 -->
<script>
  window.onload = function () {
    const scrollBox = document.getElementById('scrollBox')
    const bottomSymbol = document.getElementById('bottomSymbol')

    scrollBox.onscroll = (e) => {
      const scrollHeight = scrollBox.scrollHeight
      const clientHeight = scrollBox.clientHeight
      const scrollTop = scrollBox.scrollTop
      // 判断滚动条滚动到底部时加载数据
      if (clientHeight + scrollTop >= scrollHeight) {
        console.log('数据加载中...')
        setTimeout(() => {
          const listCopy = scrollBox.children[0].cloneNode(true)
          scrollBox.insertBefore(listCopy, bottomSymbol)
        }, 200)
      }
    }
    /**
     * 缺点：
     * 1.由于scroll事件密集发生，计算量很大，容易造成性能问题。需要做节流
     * 2.判断滚动到底计算高度的方法不易理解
     */
  }
</script>
<!-- 使用 IntersectionObserver API -->
<!--<script>
  window.onload = function () {
    const scrollBox = document.getElementById('scrollBox')
    const bottomSymbol = document.getElementById('bottomSymbol')

    const callback = (entries,_) => {
      entries.forEach(item=>{
        if (item.isIntersecting) {
          console.log('数据加载中...')
          setTimeout(()=>{
            const listCopy = scrollBox.children[0].cloneNode(true)
            scrollBox.insertBefore(listCopy,bottomSymbol)
          },200)
        }
      })
    }
    const observer = new IntersectionObserver(callback,{ root:scrollBox,threshold:0 })
    observer.observe(bottomSymbol)
  }
</script>-->
</body>
</html>
